:root {
    --primary: #4F48E2;
    --gray: #A5A5AD;
    --middle-gray: #8E8E92;
    --light-gray: #E8E8EC;
    --error: #EB3B3B;
    --success: #26CD86;
    --content-bg: #F1F1F3;
    --line-gray: #E8EEF2;
    --bg: rgba(246, 246, 247, 0.96);
    --bg-o: rgba(246, 246, 247);
    --confirmed: #46C4BD;
    --padding: #FCDA5E;
    --account-layout: rgb(246, 246, 247);
    --placeHolder: #B3B6C0;

    // pc是放大1.25倍 m端vw的标准是375
    // 单位 
    // 11px     12px    13px     16px        20px      
    // 2.933vw  3.2vw   3.466vw  4.2266vw    5.333vw
    // 13.75px  15px    16.25px  20px        25px
    --m1: 0.266vw;
    --m2: 0.533vw;
    --m3: 0.8vw;
    --m4: 1.066vw;
    --m6: 1.5vw;
    --m7: 1.866vw;
    --m8:2.133vw;
    --m9: 2.4vw;
    --m10: 2.666vw;
    --m11: 2.933vw;
    --m12: 3.2vw;
    --m13: 3.466vw;
    --m14: 3.733vw;
    --m15: 4vw;
    --m16: 4.2266vw;
    --m18: 4.8vw;
    --m20: 5.333vw;
    --m24: 5.4vw;
    --m28: 7.466vw;
    --m30: 8vw;
    --m32: 8.533vw;
    --m35: 9.333vw;
    --m36: 9.6vw;
    --m40: 10.666vw;
    --m42: 11.2vw;
    --m44: 12.6vw;
    --m48: 12.8vw;
    --m50: 13.33vw;
    --m68: 18.13vw;
    --m76: 20.666vw;
    --m80: 21.333vw;
    --m100: 26.66vw;
    --m120: 32vw;
    --m126: 33.6vw;
    --m140: 37.33vw;
    --m200: 53.33vw;

    --pc1: 1px;
    --pc2: 2px;
    --pc3: 3.75px;
    --pc4: 5px;
    --pc6: 7.5px;
    --pc7: 8.75px;
    --pc8: 10px;
    --pc9: 11.25px;
    --pc10: 12.5px;
    --pc11: 13.75px;
    --pc12: 15px;
    --pc13: 16.25px;
    --pc14: 17.5px;
    --pc15: 18.75px;
    --pc16: 20px; 
    --pc18: 22.5px;
    --pc20: 25px;
    --pc24: 30px;
    --pc28: 35px;
    --pc30: 37.5px;
    --pc32: 40px;
    --pc35: 43.75px;
    --pc36: 45px;
    --pc40: 50px;
    --pc42: 52.5px;
    --pc44: 55px;
    --pc48:60px;
    --pc50: 62.5px;
    --pc68: 85px;
    --pc76: 95px;
    --pc80: 100px;
    --pc100: 125px;
    --pc120: 150px;
    --pc126: 157.5px;
    --pc140: 175px;
    --pc200: 250px;
}


[data-theme='dark'],
.king-wallet-dark,
.king-wallet-toastContent[data-theme='dark'],
.king-wallet-paper[data-theme='dark'],
[data-theme='dark'] *::after,
[data-theme='dark'] *::before {
    --main: #fff;
    --main-text: #fff;
    --font-color: #fff;
    --layout-bg: radial-gradient(121.17% 71.95% at 49.87% 0%, rgba(88, 59, 212, 0.1) 0%, rgba(216, 220, 255, 0) 100%), linear-gradient(180deg, rgba(192, 189, 252, 0.245) 0%, rgba(212, 210, 252, 0.14) 100%);
    --btn-bg: rgba(255, 255, 255, 0.3);
    --line-bg: #fff;
    --drawer-bg: linear-gradient(180deg, rgba(34, 29, 141, 0.15) 0%, rgba(193, 191, 234, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.07) 100%);
    --drawer-line-bg: background: linear-gradient(90deg, rgba(219, 218, 227, 0) 0%, #D8D7E2 51.04%, rgba(219, 218, 231, 0) 100%);
    --drawer-line: rgba(255, 255, 255, 0.7);

    --placeholder-text: rgba(255, 255, 255, 0.3);
    --disabled: rgba(255, 255, 255, 0.3);
    --referral-disabled: rgba(255, 255, 255, 0.3);
    --toast-bg: linear-gradient(138.92deg, rgba(53, 45, 223, 0.15) 0.92%, rgba(90, 83, 252, 0) 69.08%), rgba(0, 0, 0, 0.5);
    --primary-bg: linear-gradient(360deg, #4F48E2 0%, #6B65E9 100%);
    --secondary-text: rgba(255, 255, 255, 0.7);
    --secondary-gary-text: rgba(255, 255, 255, 0.7);
    --secondary-middle-text: rgba(255, 255, 255, 0.7);
    --primary-blur: rgba(255, 255, 255, 0.3);
    --drawer-mask-bg: transparent;
    --field-label: #fff;
    --field-text: #fff;
    --disabled-text: #B1B2BC;
    --primary-btn-bg: linear-gradient(360deg, #4F48E2 0%, #6B65E9 100%);
    --input-border-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.255) 100%);
    --input-bg: rgba(255, 255, 255, 0.5);
    --referral-desc-text: rgba(255, 255, 255, 0.8);
    --input-border: rgba(255, 255, 255, 0.5);
    --drawer-split-bg: linear-gradient(90deg, rgba(219, 218, 227, 0) 0%, #D8D7E2 51.04%, rgba(219, 218, 231, 0) 100%);
    --mask-bg: rgba(0, 0, 0, 0.2);
    --toast-text: #fff;
    --referral-bg: radial-gradient(44.81% 44.81% at 50% 90.19%, rgba(87, 81, 234, 0.4) 0%, rgba(166, 163, 246, 0) 100%), linear-gradient(180deg, rgba(34, 29, 141, 0.3) 0%, rgba(193, 191, 234, 0) 88.46%), linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.07) 88.46%);
    --page-bg: radial-gradient(121.17% 71.95% at 49.87% 0%, rgba(88, 59, 212, 0.1) 0%, rgba(216, 220, 255, 0) 100%)
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
        , linear-gradient(180deg, rgba(192, 189, 252, 0.315) 0%, rgba(212, 210, 252, 0.18) 100%);

    --referral-input-bg: rgba(255, 255, 255, 0.1);
    --input-split: #fff;
    --main-split: rgba(255, 255, 255, 0.2);
    --menu-split: rgba(255, 255, 255, 0.2);

    --qr-bg: rgba(62, 61, 89, 0.9);
    --tab-bg: rgba(255, 255, 255, 0.1);
    --desc-text: rgba(255.255.255.0.5);

    --icon-bg: #fff;
    --time-text: #A5A5AD;

    --switch-unchecked: rgba(255, 255, 255, 0.3);
    --transfer-type: #6A63F3;
    --in-game: #46C4BD;
    --nft-item: rgba(255, 255, 255, 0.1);
    --border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.255) 100%);

    --event-bg: #1D2430;
    --shareItem-bg: linear-gradient(0deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.30) 100%);
}

[data-theme='light'],
.king-wallet-light,
.king-wallet-toastContent[data-theme='light'],
.king-wallet-paper[data-theme='light'],
[data-theme='light'] *::after,
[data-theme='light'] *::before {
    --main: #4F48E2;
    --main-text: #4F48E2;
    --font-color: #0F0F10;
    --layout-bg: rgba(241, 241, 248, 0.5);
    --btn-bg: rgba(255, 255, 255, 0.6);
    --line-bg: linear-gradient(90deg, rgba(99, 98, 125, 0) 0%, rgba(99, 98, 125, 0.5) 75.52%);
    --drawer-bg: rgba(255, 255, 255, 0.7);
    --drawer-line: #D3D3DB;
    --drawer-line-bg: background: linear-gradient(90deg, rgba(219, 218, 227, 0) 0%, #D8D7E2 51.04%, rgba(219, 218, 231, 0) 100%);
    --placeholder-text: #8E8E92;
    --disabled: rgba(245, 245, 245, 0.3);
    --referral-disabled: #c9ced5;
    --toast-bg: linear-gradient(138.92deg, rgba(53, 45, 223, 0.1) 0.92%, rgba(90, 83, 252, 0) 69.08%), rgba(255, 255, 255, 0.9);
    --primary-bg: linear-gradient(360deg, #4F48E2 0%, #6B65E9 100%);
    --secondary-text: #c9ced5;
    --secondary-gary-text: #464D60;
    --secondary-middle-text: #7E8189;
    --primary-blur: rgba(79, 72, 226, 0.3);
    --drawer-mask-bg: rgba(255, 255, 255, 0.2);
    --field-label: #464D60;
    --field-text: #464D60;
    --disabled-text: #B1B2BC;
    --primary-btn-bg: linear-gradient(360deg, #4F48E2 0%, #6B65E9 100%);
    --input-border-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.357) 100%);

    --input-bg: rgba(255, 255, 255, 0.5);
    --referral-desc-text: rgba(129, 128, 146, 0.8);
    --input-border: rgba(255, 255, 255, 0.35);

    --drawer-split-bg: linear-gradient(90deg, rgba(219, 218, 227, 0) 0%, #D8D7E2 51.04%, rgba(219, 218, 231, 0) 100%);
    --mask-bg: rgba(255, 255, 255, 0.2);
    --toast-text: #464D60;
    --referral-bg: radial-gradient(44.81% 44.81% at 50% 90.19%, rgba(237, 237, 255, 0.1) 0%, rgba(166, 163, 246, 0) 100%, rgba(236, 236, 255, 0) 100%), linear-gradient(180deg, rgba(229, 228, 255, 0.6) 0%, rgba(255, 255, 255, 0) 88.46%), linear-gradient(180deg, #F3F2FF 0%, rgba(255, 255, 255, 0.7) 88.46%);
    --page-bg: radial-gradient(121.17% 71.95% at 49.87% 0%, rgba(216, 220, 255, 0.18) 0%, rgba(110, 76, 252, 0) 100%)
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
        , linear-gradient(180deg, rgba(234, 233, 255, 0.7) 0%, rgba(238, 237, 255, 0.2) 100%);
    --referral-input-bg: #E9E9F1;
    --input-split: #C9C7D5;
    --main-split: #E4E4E4;
    --menu-split: #A5A5AD;
    --qr-bg: #F6F6FC;
    --tab-bg: rgba(255, 255, 255, 0.3);
    --desc-text: #;
    --icon-bg: #fff;
    --time-text: #8E8E92;

    --switch-unchecked: rgba(79, 72, 226, 0.3);
    --transfer-type: #6A63F3;
    --in-game: #46C4BD;
    --nft-item: rgba(255, 255, 255, 0.3);

    --border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.255) 100%);

    --event-bg: #FFF;
    --shareItem-bg: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%);
}

